<template>
  <div class="subject_container">
    <div class="subject">
      <div class="subject_content">
        <span>请把右侧的含义拖拽到左侧正确的位置。</span>
      </div>
      <div class="next_subject_btn" v-if="isHaveRight" @click="toNext"></div>
    </div>
    <div class="drag_container">
      <div class="answer">
        <div class="target_list">
          <TargetItem
            v-for="(t, idx) in targetList"
            :key="idx"
            :url="t.url"
            :type="t.type"
            :order="t.order"
            :text="t.text"
            @drop="handleDrop($event, idx)"
          ></TargetItem>
        </div>
        <div class="btn">
          <div class="sub_btn" @click="submit">
            <span>提交</span>
          </div>
          <div class="sub_btn rest_btn" @click="rest">
            <span>重置</span>
          </div>
        </div>
      </div>
      <div class="origin_list">
        <OriginItem
          v-for="(t, idx) in originList"
          :key="idx"
          :label="t.name"
          :type="t.type"
          :order="t.value"
        />
      </div>
    </div>
    <FullScreenTip
      :tipMsg="tipMsg"
      :tipType="tipType"
      v-if="tipMsg"
      @close="closeTip"
      @restart="restart"
    />
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { leftImg, rightName } from "./CONST";
import FullScreenTip from "@/Components/FullScreenTip/Index.vue";
import OriginItem from "./OriginItem.vue";
import TargetItem from "./TargetItem.vue";
import RIGHTTIPMP3 from "@/assets/audio/right_tip.mp3";
import WRONGTIPMP3 from "@/assets/audio/wrong_tip.mp3";
const rightTipAudio = new Audio(RIGHTTIPMP3);
const wrongTipAudio = new Audio(WRONGTIPMP3);

const tipMsg = ref();
const tipType = ref(false);
const router = useRouter();
const isHaveRight = ref(false);
// 数据
const targetList = ref(leftImg);
const originList = ref(rightName);

/**
 * 放置
 */
const handleDrop = (e, idx) => {
  targetList.value[idx].text = e.label;
  targetList.value[idx]["value"] = e.order;
};

// 重置
const rest = () => {
  targetList.value.forEach((l) => {
    l.text = "";
    l.value = "";
  });
  isHaveRight.value = false;
};
// 提交
const submit = () => {
  const num =
    targetList.value.filter((l) => l.value || l.value === 0).length === 4;
  if (!num) {
    tipMsg.value = "还有别的正确选项，再想想。";
    tipType.value = true;
    wrongTipAudio.play();
    return;
  }
  let isflag = false;
  targetList.value.forEach((l) => {
    if (l.value !== l.order) {
      isflag = true;
    }
  });
  chooseOption(isflag);
};
/**
 * 选择选项
 * isflag false 通过 true 未通过
 */
const chooseOption = (isflag) => {
  if (!isflag) {
    isHaveRight.value = true;
    rightTipAudio.play();
  } else {
    tipMsg.value = "请再试一次";
    tipType.value = false;
    wrongTipAudio.play();
  }
};
/**
 * 下一题
 */
const toNext = () => {
  isHaveRight.value = false;
  router.replace({
    path: "/Third",
  });
};
/**
 * 关闭提示弹窗
 */
const closeTip = () => {
  tipMsg.value = null;
};
const restart = () => {
  if (tipMsg.value === "请再试一次") {
    tipMsg.value = null;
    rest();
  }
};
</script>
<style lang="less" scoped>
.subject_container {
  position: relative;
}

.subject {
  position: absolute;
  top: 64px;
  left: 195px;
  display: flex;
  align-items: center;
  width: 1530px;
  height: 118px;
  border-radius: 40px;
  background: #ffffff96;
  box-sizing: border-box;
  border: 9px solid #ffd153;

  .subject_content {
    display: flex;
    align-items: center;
    margin-left: 80px;
    margin-right: 95px;
    width: 1170px;
    height: 72px;

    > span {
      font-size: 43px;
      letter-spacing: normal;
      font-weight: 600;
      color: #000000;
    }
  }

  .next_subject_btn {
    cursor: pointer;
    width: 116px;
    height: 99px;
    background-image: url(@/assets/icon/next_subject.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
.drag_container {
  position: absolute;
  top: 331.5px;
  left: 89px;
  display: flex;
  justify-content: space-between;
  width: 1700px;
  height: 639px;
  .answer {
    width: calc(100% - 238px);
    margin-top: 24px;
    .target_list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 20px 20px;
      width: 100%;
    }

    .btn {
      margin-top: 130px;
      display: flex;
      align-items: center;
      justify-content: center;
      .sub_btn {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 365px;
        height: 118px;
        border-radius: 417.72px;
        background: #f17546;
        margin-right: 57px;
        > span {
          display: inline-block;
          font-family: FZLanTingYuanS-R-GB;
          font-size: 64px;
          font-weight: normal;
          line-height: normal;
          text-align: center;
          letter-spacing: 0.54em;
          font-variation-settings: "opsz" auto;
          color: #ffffff;
          margin-right: -45px;
        }
        &:last-child {
          margin-right: 0px;
        }
      }
      .rest_btn {
        background: #64a3fc;
      }
    }
  }

  .origin_list {
    width: 238px;
    margin-left: 64px;
  }
}
</style>
